<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/form-elements.css">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<link rel="stylesheet" href="css/layer.css">
		<title>注册</title>
		<style>
			body {
				background: url("img/bg.jpg") no-repeat fixed;
				background-size: cover;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		<div class="container myBox" id="app">
			<div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-3 form-box">
				<div class="form-top">
					<div class="form-top-left">
						<h3>新用户注册</h3>
						<p>请输入您的信息:</p>
					</div>
					<div class="form-top-right">
						<i class="fa fa-key"></i>
					</div>
				</div>
				
				
				<div class="form-bottom" id="app" style="padding-bottom: 5px;">
					<div role="form" class="login-form">
						<!--上面的输入框尽可能不需要外边距，使用row解决-->
						<div class="row">
							<div class="form-group">
								<input type="text" v-model="email"  name="form-email" placeholder="邮箱" class="form-username form-control"
								@blur="checkEmail" id="form-email">
							</div>
							<div class="form-group">
								<input type="text" v-model="username" name="form-username" placeholder="用户名" class="form-username form-control"
								@blur="checkUsername" id="form-username">
							</div>
							<div class="form-group">
								<input type="password" v-model="password" name="form-password" placeholder="密码" class="form-password form-control" id="form-password">
							</div>
							<div class="form-group">
								<input type="password" v-model="password2" name="form-password2" placeholder="确认密码" class="form-password form-control"
								@blur="checkPassword" id="form-password2">
							</div>
							<div class="form-group">
								<button @click="register" style="width: 100%;" class="btn">注册</button>
								<div class="row">
									<div style="padding: 10px 25px">
										<div style="display: inline-block;float: left" class="text-left"><a href="main/toLogin">&lt;&lt; 返回登录</a></div>
										<!--<div style="display: inline-block;float: right" class="text-right"><a href="#">没有账号?</a></div>-->
									</div>
								</div>
							</div>
						</div>
						<!--上面的输入框尽可能不需要外边距，使用row包裹起来解决-->
					</div>
				</div>
			</div>
		</div>
		<!-- Javascript -->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="js/jquery.backstretch.min.js"></script>
		<script src="js/scripts.js"></script>
		<script src="js/layer.js"></script>
		<script src="js/vue-2.6.11.js"></script>
		<script src="js/axios-0.19.2.min.js"></script>
		<script src="js/jquery-cookie-1.4.1.js"></script>
		<script type="text/javascript">
			// let vm = new Vue({
			// 	el: '#app',
			// 	data: {
					
			// 	},methods:{
					
			// 	}
			// })
			
			let vm = new Vue({
				el: '#app',
				data:{
					email: '',
					username: '',
					password: '',
					password2: '',
					emailReg: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				},
				methods:{
					checkEmail(){
						if ("" != this.email.trim()) {
							if (!this.emailReg.test(this.email.trim())) {
								layer.msg("请输入正确格式的邮箱地址");
								// document.getElementById("form-email").focus();
							} else {
								axios({
									url: '/user/checkEmail',
									params: {email: this.email.trim()}
								}).then((response) => {
									// this.emailChecked = true;
									if (!response.data.flag){
										layer.msg(response.data.message)
										// document.getElementById("form-email").focus();
									}
								})
							}
						}
					},
					checkUsername(){
						if ("" != this.username.trim()) {
							axios({
								url: '/user/checkUsername',
								params: {username: this.username.trim()}
							}).then((response) => {
								if (!response.data.flag) {
									layer.msg(response.data.message);
									// document.getElementById("form-username").focus();
								}
							})
						}
					},
					checkPassword(){
						if ("" == this.password) {
							layer.msg("请先输入密码");
							// document.getElementById("form-password").focus();
						} else if ("" != this.password && "" != this.password2) {
							if (this.password != this.password2) {
								layer.msg("密码输入不一致，请重新输入");
								// document.getElementById("form-password2").focus();
							}
						}
					},
					register(){
						if ("" == this.email.trim()) layer.msg("请输入邮箱地址");
						else if (!this.emailReg.test(this.email)) layer.msg("请输入正确格式的邮箱地址");
						else if ("" == this.username.trim()) layer.msg("请输入用户名");
						else if ("" == this.password.trim()) layer.msg("请输入密码");
						else if ("" == this.password2.trim()) layer.msg("请输入确认密码");
						else if (this.password.trim() != this.password2.trim()) layer.msg("密码输入不一致,请重新输入");
						else {
							let user = {
								email: this.email.trim(),
								username: this.username.trim(),
								password: this.password
							}
							axios.post('/user/register', user).then((response) => {
								if(response.data.flag){
									layer.msg(response.data.message);
									location.href = "/index.html";
								}
							})
						}
					}
				}
			})
		</script>
	</body>
</html>
